<template>
    <div class="tabs">
        <div v-for="(item,index) in list" :key="index" :ref="'tab'+index" v-show="item.show" class="tab" :class="{'tab-s': value == index}" :style="{paddingBottom: bottom+'px'}" @click="setValue(index)">
            {{item.name}}
        </div>
        <div class="line" :style="{left: lineLeft+'px', width: line+ 'px', bottom: bottom+'px'}"></div>
    </div>
</template>

<script>
    export default {
        name: 'tabs',
        components: {},
        model: {
            prop: 'value', // 默认是value
            event: 'input', // 默认是input
        },
        props: {
            value: Number,
            list: {
                type: Array,
                default: function () {
                    return []
                }
            },
            line: {
                type: Number,
                default: 24
            },
            bottom: {
                type: Number,
                default: 27
            }
        },
        data() {
            return {
                lineLeft: 0
            }
        },
        mounted() {
            this.tabsClick(this.value)
        },
        watch: {
            value(n, o) {
                this.tabsClick(n)
            }
        },
        methods: {
            setValue(index) {
                this.$emit("input", index)
            },
            tabsClick(index, item) {
                let target = this.$refs['tab' + index][0]
                this.lineLeft = target.offsetLeft + (target.offsetWidth - this.line) / 2
            }
        },
    };
</script>

<style lang="scss" scoped>
    .tabs {
        position: relative;
        width: 1200px;
        margin: 0 auto;
        padding-top: 22px;
        display: flex;
        align-items: center;

        .tab {
            font-size: 18px;
            color: #333333;
            height: 50px;
            line-height: 50px;
            margin: 0 24px;
            cursor: pointer;
            box-sizing: content-box;

            &:hover {
                opacity: 0.8;
                color: #1C87F3;
            }
        }

        .tab-s{
            color: #1C87F3;
            font-weight: 600;
        }

        .line {
            position: absolute;
            height: 2px;
            left: 0;
            background: #1C87F3;
            transition: left 0.2s;
        }
    }
</style>